<template>
	<view>
		<view class="navbar">
			<view class="min-navbar">
				<uni-nav-bar height="120rpx" :fixed="true" :border="false" size="20" @clickLeft='clickLeft'
					@clickRight="clickRight">
					<block slot="left">
						<uni-icons type="home-filled" color="rgb(0, 0, 0)" size="23" />
					</block>
					<view class="input-view">
						<u-button shape="circle" class="custom-style" @click="logins">登录</u-button>
						<u-button type="primary" shape="circle" class="custom-style" @click="register">注册</u-button>
					</view>
					<block slot="right">
						<uni-icons type="bars" color="rgb(0, 0, 0)" size="22" />
					</block>
				</uni-nav-bar>
				<view v-show="showSubMenu">
					<ul class='subMenu'>
						<li v-for="(item,index) in navlist" :key="index">
							<view style="display: flex;align-items: center;justify-content: center;"
								@click="navigator(item)" :class='nowPath ===item.path ? "active":""'>
								<uni-icons :type="item.icon" :color="nowPath ===item.path?'#377af4':'#222' "
									size="23" />
								<view :class='nowPath ===item.path ? "active-clor":""'>
									{{item.title}}
								</view>
							</view>
						</li>
					</ul>
				</view>
			</view>
			<ul class="topnav">
				<li v-for="(item,index) in navlist" :key="index">
					<view @click="navigator(item)" style="display: flex;align-items: center;"
						:class='nowPath ===item.path ? "active":""'>
						<uni-icons :type="item.icon" :color="nowPath ===item.path?'#377af4':'#222' " size="23" />
						<view>
							{{item.title}}
						</view>
					</view>
				</li>
				<li class="right">
					<view class="input-view">
						<u-button shape="circle" class="custom-style" @click="logins">登录</u-button>
						<u-button type="primary" shape="circle" class="custom-style" @click="register">注册</u-button>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		name: "navBar",
		props: {
			appname: {
				type: String,
				default: '应用名称'
			},
			nowPath: {
				type: String,
				default: "/pages/index/index"
			},
			navlist: {
				type: Array,
				default: () => [{
						"title": "首页",
						"path": "/pages/index/index",
						"icon": "home"
					}, {
						"title": "自助购卡",
						"path": "/pages/test1/test1",
						"icon": "cart"
					},
					{
						"title": "用户评论",
						"path": "/pages/test2/test2",
						"icon": "chat"
					},
					{
						"title": "联系我们",
						"path": "/pages/test2/test2",
						"icon": "paperplane"
					}
				]
			}

		},
		data() {
			return {
				showSubMenu: false,
			};
		},
		methods: {
			clickLeft() {
				console.log("click left");
			},
			clickRight() {
				this.showSubMenu = !this.showSubMenu
			},
			navigator(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			logins() {
				this.$emit('toLogin')
			},
			register() {
				this.$emit('register')
			}
		}
	}
</script>

<style lang="scss">
	.input-view {
		display: flex !important;
		align-items: center !important;
	}

	.custom-style {

		width: 140rpx;
		margin-left: 20rpx;
	}

	.active-clor {
		color: #377af4 !important;
	}

	.navbar {
		body {
			margin: 0;
		}

		.topnav {
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #fff;
			// background-color: #333;
		}

		.topnav li {
			float: left;
		}

		.topnav li view {
			display: block;
			color: #222;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			cursor: pointer;
		}

		.topnav li view:hover:not(.active) {
			// background-color: #111;
		}

		.common {
			display: flex;
			align-items: center;
		}

		.topnav li view.active {
			// background-color: #377af4;
			color: #377af4;
			font-weight: 600;
			border-bottom: 5rpx solid #377af4;

		}

		.topnav li.right {
			float: right;
		}

		@media screen and (max-width: 600px) {

			.topnav li.right,
			.topnav li {
				float: none;
			}

			.topnav li {
				display: none;
			}
		}

		@media screen and (min-width: 601px) {
			.min-navbar {
				display: none;
			}

			.topnav li {
				display: block;
			}
		}

		.subMenu {
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			// background-color: #333;

			li view {
				display: block;
				color: #222;
				text-align: center;
				padding: 14px 16px;
				text-decoration: none;
			}

			li view.active {
				// background-color: #4CAF50;
				color: #377af4 !important;
				font-weight: 600;
				border-bottom: 5rpx solid #377af4;
			}

			li.right,
			li {
				float: none;
			}

		}
	}
</style>